<template>
  <a-card :bordered="false">
    <a-row>
      <a-col>
        <a-switch v-bind="pageSwitchProps" v-model="pageSwitch" />
      </a-col>
      <a-col>
        <a-table
          v-bind="tableProps"
          @change="handleTableChange"
          style="margin-top: 20px"
        >
        </a-table>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
export default {
  name: 'TableTotal',
  data() {
    return {
      columns: [
        {
          title: '#',
          width: '180px',
          align: 'center',
          dataIndex: 'rowIndex',
          customRender: function(text, r, index) {
            return (text !== '总计') ? (parseInt(index) + 1) : text
          }
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 180
        },
        {
          title: '贡献点',
          dataIndex: 'point',
          width: 180
        },
        {
          title: '等级',
          dataIndex: 'level',
          width: 180
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          width: 180
        }
      ],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10
      },
      dataSource: [
        { id: '1', name: '张三', point: 23, level: 3, updateTime: '2019-8-14' },
        { name: '小王', point: 6, level: 1, updateTime: '2019-8-13' },
        { name: '李四', point: 53, level: 8, updateTime: '2019-8-12' },
        { name: '小红', point: 44, level: 5, updateTime: '2019-8-11' },
        { name: '王五', point: 97, level: 10, updateTime: '2019-8-10' },
        { name: '小明', point: 33, level: 2, updateTime: '2019-8-10' },
        { name: '小张', point: 33, level: 2, updateTime: '2019-8-10' },
        { name: '小六', point: 33, level: 2, updateTime: '2019-8-10' },
        { name: '小五', point: 33, level: 2, updateTime: '2019-8-10' },
        { name: '小赵', point: 33, level: 2, updateTime: '2019-8-10' },
        { name: '李华', point: 33, level: 2, updateTime: '2019-8-10' },
        { name: '小康', point: 33, level: 2, updateTime: '2019-8-10' },
        { name: '小鹿', point: 33, level: 2, updateTime: '2019-8-10' }
      ],
      newArr: [],
      newDataSource: [],
      footerDataSource: [],
      pageSwitch: true
    }
  },
  computed: {
    // 数据表格的固定属性
    tableProps() {
      let tableProps = {
        size: 'middle',
        rowKey: 'rowIndex',
        columns: this.columns,
        scroll: { x: true }
      }
      let renderFooter = this.footerDataSource.length === 0 ? null : () => this.renderTableFooter(tableProps)
      return {
        ...tableProps,
        ref: 'table',
        class: 'chart-data-list',
        pagination: this.pageSwitch ? this.ipagination : false,
        columns: this.columns,
        dataSource: this.dataSource,
        footer: renderFooter
      }
    },
    pageSwitchProps() {
      return {
        checkedChildren: '分页',
        unCheckedChildren: '分页',
        style: {
          position: 'absolute',
          right: '0px',
          top: '-10px'
        }
      }
    }
  },
  mounted() {
    // this.tableAddTotalRow(this.columns, this.dataSource)
    /*新增分页合计方法*/
    this.newDataSource = this.dataSource
    this.dataHandling(1, this.ipagination.pageSize)
  },
  watch: {
    //update-begin---author:wangshuai ---date:20220209  for：[JTC-494]常用示例->表格合计写法改成新的写法------------
    'pageSwitch': function(val) {
      if (!val) {
        this.dataHandling('-1', 0)
      } else {
        this.dataHandling(1, this.ipagination.pageSize)
      }
    },
    'ipagination.current': function(val) {
      this.dataHandling(val, this.ipagination.pageSize)
    },
    //当合计行变化时，绑定滚动条
    'footerDataSource': {
      async handler(dataSource) {
        // 当底部合计行有值，并且显示出来时，再同步滚动条
        if (dataSource && dataSource.length > 0) {
          await this.$nextTick()
          // 同步表与footer滚动
          let dom = this.$refs.table.$el.querySelectorAll('.ant-table-body')[0]
          let footerDom = this.$refs.footerTable.$el.querySelectorAll('.ant-table-body')[0]
          dom.addEventListener(
            'scroll',
            () => {
              footerDom.scrollLeft = dom.scrollLeft
            },
            true
          )
        }
      }
      //update-end---author:wangshuai ---date:20220209  for：[JTC-494]常用示例->表格合计写法改成新的写法------------
    }
  },
  methods: {
    /** 表格增加合计行 */
    tableAddTotalRow(columns, dataSource) {
      let numKey = 'rowIndex'
      let totalRow = { [numKey]: '合计' }
      columns.forEach(column => {
        let { key, dataIndex } = column
        if (![key, dataIndex].includes(numKey)) {

          let total = 0
          dataSource.forEach(data => {
            total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN
            console.log(data[dataIndex], ':', (/^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN))
          })

          if (Number.isNaN(total)) {
            total = '-'
          }
          totalRow[dataIndex] = total
        }
      })

      dataSource.push(totalRow)
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
    },
    //update-begin---author:wangshuai ---date:20220209  for：[JTC-494]常用示例->表格合计写法改成新的写法------------
    /*如果分页走这个方法*/
    dataHandling(pageNo, pageSize) {
      //根据当前页数和每页显示条数分割数组
      let arrs = []
      //如果pageNo不是-1（不分页）,那么需要对数据进行分页计算
      if (pageNo != -1) {
        arrs = this.newDataSource.slice((pageNo - 1) * pageSize, pageNo * pageSize)
      } else {
        arrs = this.newDataSource
      }
      let newDataSource = []
      let newArr = {}
      newArr.rowIndex = '总计'
      let level = 0
      let point = 0
      //每一项的数值相加
      for (let j = 0; j < arrs.length; j++) {
        level += arrs[j].level
        point += arrs[j].point
      }
      newArr.level = level
      newArr.point = point
      newDataSource.push(newArr)
      //给foot底部数组赋值
      this.footerDataSource = newDataSource
    },
    // 渲染表格底部合计行
    renderTableFooter(tableProps) {
      let h = this.$createElement
      return h('a-table', {
        ref: 'footerTable',
        props: {
          ...tableProps,
          pagination: false,
          dataSource: this.footerDataSource,
          showHeader: false
        }
      })
      //update-end---author:wangshuai ---date:20220209  for：[JTC-494]常用示例->表格合计写法改成新的写法------------
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .chart-data-list .ant-table-footer .ant-table-body {
  overflow: hidden !important;
}

/deep/ .ant-table-footer {
  padding: 0;
}
</style>